<template>
  <div class="editor-wrapper">
    <div :id="editorId"></div>
  </div>
</template>

<script>
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
import { oneOf } from '@/libs/tools'

export default {
  name: 'Editor',
  data () {
    return {
      uploadUrl: '',
      uploadHeader: {},
      infoId: null
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * 绑定的值的类型, enum: ['html', 'text']
     */
    valueType: {
      type: String,
      default: 'html',
      validator: (val) => {
        return oneOf(val, ['html', 'text'])
      }
    },
    /**
     * @description 设置change事件触发时间间隔
     */
    changeInterval: {
      type: Number,
      default: 200
    },
    /**
     * @description 是否开启本地存储
     */
    cache: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    editorId () {
      return `editor${this._uid}`
    }
  },
  methods: {
    setHtml (val) {
      this.editor.txt.html(val)
    },
    init () {
      let vm = this
      let userInfo = JSON.parse(localStorage.getItem('userData'))
      if (this.$config.baseUrl.dev === '') {
        // 本地开发环境 默认地址
        vm.uploadUrl = 'http://localhost/admin/CmsContentList/upload'
      } else {
        vm.uploadUrl = this.$config.baseUrl + 'CmsContentList/upload'
      }
      vm.uploadHeader = {'ApiAuth': userInfo.apiAuth}
    },
    // 获取父页面传来的内容
    showContent (data, id) {
      id = JSON.stringify(id)
      // 如果id和本地存储id一致 且 本地存储内容存在的话，用本地存储填充编辑器 否则用传过来的内容填充编辑器
      if (localStorage.getItem('infoId')) {
        if (localStorage.getItem('infoId') !== id) {
          localStorage.removeItem('contentData')
          this.editor.txt.html(data)
        } else {
          if (localStorage.getItem('contentData')) {
            this.editor.txt.html(localStorage.getItem('contentData'))
          } else {
            this.editor.txt.html(data)
          }
        }
      } else {
        this.editor.txt.html(data)
      }
      this.infoId = id
    }
  },
  mounted () {
    this.editor = new Editor(`#${this.editorId}`)
    this.editor.customConfig.onchange = (html) => {
      let text = this.editor.txt.text()
      // if (this.cache) localStorage.editorCache = html
      if (this.cache) localStorage.setItem('contentData', html)
      localStorage.setItem('infoId', this.infoId)
      this.$emit('input', this.valueType === 'html' ? html : text)
      this.$emit('on-change', html, text)
      // console.log(localStorage.getItem('contentData'))
    }
    this.editor.customConfig.onchangeTimeout = this.changeInterval
    this.editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

    // 非base64 保存图片
    /*this.init ()
    this.editor.customConfig.uploadImgServer = this.uploadUrl  // 上传图片到服务器
    this.editor.customConfig.uploadImgMaxLength = 3 // 限制一次最多上传 3 张图片
    this.editor.customConfig.uploadFileName = 'file' // 上传图片时，可自定义filename，即在使用formdata.append(name, file)添加图片文件时，自定义第一个参数。
    this.editor.customConfig.uploadImgHeaders = this.uploadHeader // 上传图片时刻自定义设置 header
    // 获取用户名和id
    let userInfo = JSON.parse(localStorage.getItem('userData'))
    // 上传时附加参数
    this.editor.customConfig.uploadImgParams = {
      // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
      // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
      username: userInfo.userName,
      userid: userInfo.userId
    }
    // 获取服务器文件保存ip地址
    let imgSrc = this.$config.imgSrc
    // 可使用监听函数在上传图片的不同阶段做相应处理
    this.editor.customConfig.uploadImgHooks = {
      before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
      },
      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        let url = imgSrc + result.data.fileUrl
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }*/
    // 非base64 保存图片 end

    // create这个方法一定要在所有配置项之后调用
    this.editor.create()
    // 如果本地有存储加载本地存储内容
    let html = ''
    if (localStorage.getItem('contentData'))
      html = localStorage.getItem('contentData')
    else
      html = this.value
    if (html) this.editor.txt.html(html)
  }
}
</script>

<style>

</style>
